﻿@{
    Layout = "~/Views/Shared/_Behind.cshtml";
    ViewBag.Title = "长月甜品-商品管理";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="robots" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>



    <div id="app" class="content-body" style="border: solid 25px white; margin-top: 75px;padding:0px;border-left:#808080 solid 2px;">
        <br />
        <h3 style="margin-left:30px;">新增商品</h3>

        <el-form ref="formAddress" :model="formPro" label-width="80px" style="margin-left:20px;">
            <el-form-item label="商品图片">
                <template>
                    <div style="height:200px;width:100%; ">

                        <el-upload action="#"
                                   :limit="max"
                                   :on-change="beforeupload"
                                   list-type="picture-card"
                                   :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail"
                                     :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview"
                                          v-on:click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled"
                                          class="el-upload-list__item-delete"
                                          v-on:click="handleDownload(file)">
                                        <i class="el-icon-download"></i>
                                    </span>
                                    <span v-if="!disabled"
                                          class="el-upload-list__item-delete"
                                          v-on:click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                </template>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="formPro.name" placeholder="商品名称"  style="width:60%"></el-input>

            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="formPro.price" placeholder="商品价格"  style="width:60%"></el-input>
            </el-form-item>
            <el-form-item label="商品类别">
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options"
                               :key="item.cid"
                               :label="item.cname"
                               :value="item.cid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:150px;background-color:black;" v-on:click="AddressSubmit()">提交</el-button>


            </el-form-item>
        </el-form>
    </div>


    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/static/js/vue-2.6.12.js"></script>

    <script src="~/element-ui/index.js"></script>
    <script src="~/static/js/axios.min.js"></script>
    @*<script src="https://unpkg.com/axios/dist/axios.min.js"></script>*@
    <script src="~/static/js/cos-js-sdkv5.min.js"></script>
    @*<script src="https://unpkg.com/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>*@
    <script>
        var Main = {
            data() {
                return {
                    tableData: [],
                    Baseimg: "",
                    input: "",
                    formPro: {

                        name: "",
                        price: "",

                    },
                    max: 1,
                    imageUrl: "",
                    options: [],
                    value: "",
                    url: 'Images',
                    dialogImageUrl: '',
                    dialogVisible: false,
                    disabled: false,
                    imgname: "",
                }
            },
            created() {
                this.GetAllClassify();

            },
            methods: {
                async GetAllClassify() {
                    const { data: res } = await axios.get("/Admins/GetCakeClassify");
                    console.log(res);
                    this.options = res;
                },
                handleRemove(file) {
                    console.log(file);
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                handleDownload(file) {
                    console.log(file);
                },
                beforeupload(file) {

                    this.uploadImg(file.raw, this.url);
                    this.imgname = file.raw.name;
                    console.log(file)

                },
                uploadImg(fileData, url) {
                    //var url = "";
                    const Bucket = 'tcr-1308226713'; /* 存储桶 */
                    const Region = 'ap-guangzhou';
                    const cos = new COS({
                        SecretId: 'AKIDsZ0B7nCKbdOsACwRgfNp1xd191d06wWp',
                        SecretKey: '3pKYVGp78tOdbHgpiLhma7OP8amgJglZ',
                    });
                    const files = {}
                    files.Body = fileData
                    files.Bucket = Bucket
                    // files.Bucket = Bucket
                    files.Key = url + '/' + fileData.name
                    files.Region = Region;
                    let arrList = [];
                    arrList.push(files);

                    cos.uploadFiles({
                        files: arrList,
                        SliceSize: 1024 * 1024 * 10,
                        /* 设置大于10MB采用分块上传 */
                        onProgress: function (info) {
                            var percent = parseInt(info.percent * 10000) / 100;
                            var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
                            console.log(percent)
                        },
                        onFileFinish: function (err, data, options) {
                            console.log(options)
                        },
                    }, (err, data) => {
                        if (err) {
                            console.log('上传失败', err);
                            return;
                        }

                    });
                },

                //添加
                async AddressSubmit() {
                    var img = this.imgname;
                    //console.log(img);
                    //console.log(this.formPro.name);
                    //console.log(this.formPro.price);
                    //console.log(this.value );

                    const { data: res } = await axios.post("/Admins/Addpro", { pimg: img, name: this.formPro.name, price: this.formPro.price, classify: this.value })
                    console.log(res);

                    if (res.status == "200") {

                        this.$message({
                            message: '添加成功！！',
                            type: 'success'
                        });
                    }
                }
            }

        }

        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')
    </script>

    <script src="~/behind/js/global.min.js"></script>
    <script src="~/behind/js/jquery.nice-select.min.js"></script>

    <script src="~/behind/js/Chart.bundle.min.js"></script>

    <script src="~/behind/js/owl.carousel.js"></script>
    <script src="~/behind/js/custom.min.js"></script>
    <script src="~/behind/js/dlabnav-init.js"></script>
    @*<script src="~/behind/js/styleSwitcher.js"></script>*@



</body>
</html>
